<template>
  <el-row class="tac">
    <el-col :span="20">
      <h5 style="background-color: #cccccc;color:black;font-size: x-large;text-align: center;padding: 10px">物找人系统</h5>
      <el-menu
          class="el-menu-vertical-demo"
      >
        <el-menu-item index="1" @click="handleClick('信息统计')">
          <el-icon><ZoomOut /></el-icon>
          <span>信息统计</span>
        </el-menu-item>
        <el-menu-item index="2" @click="handleClick('图片识别')">
          <el-icon><Picture /></el-icon>
          <span>图片识别</span>
        </el-menu-item>
        <el-menu-item index="3" @click="handleClick('信息查找')">
          <el-icon><document /></el-icon>
          <span>信息查找</span>
        </el-menu-item>
        <el-menu-item index="4" @click="handleClick('个人中心')">
          <el-icon><User /></el-icon>
          <span>个人中心</span>
        </el-menu-item>
        <el-menu-item index="5" @click="handleClick('退出系统')">
          <el-icon><SwitchButton /></el-icon>
          <span>退出系统</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script setup>
  import {
    Document,
    ZoomOut,
    User,
    SwitchButton,
    Picture,
  } from '@element-plus/icons-vue'
  import router from '@/router';

  function handleClick(xbutton){
    if(xbutton === '个人中心'){
      router.push('/personalcenter');
    }else if(xbutton === '图片识别'){
      router.push('/imageRecognition');
    }else if(xbutton === '信息查找'){
      router.push('/searchMessage');
    }else if(xbutton === '信息统计'){
      router.push('/statisticalmessage');
    }else if(xbutton === '退出系统'){
      alert('账号已退出');
      router.push('/login');
    }
  }
</script>

